<script setup lang=ts>
import { formatNumber } from '@/home/utils/format';
import { useFetch } from '@/home/hooks/fetch';
import { useAsyncData } from '@/home/hooks/async-data';
import Tag from '@/home/components/Tag.vue';
import { gotoUrl } from '@/home/utils/other';

const props = defineProps({
  isSelected: {
    type: Boolean,
    default: false,
  },
});

const { $fetch } = useFetch();

const isSelected = props.isSelected ? -1 : 0;
const { data } = useAsyncData(
  'home:information:normal',
  () => $fetch('/information/v2/home_info_list', { method: 'post', data: { isSelected, pageSize: 6 } }),
);
</script>

<template>
  <section class="w-880 flex flex-wrap gap-32">
    <div class="h-305 w-272 overflow-hidden rounded-12 bg-white hover:(shadow-[0_0_16px_0_rgba(0,0,0,0.08)])" v-for="item in data" :key="item.informationId">
      <RouterLink :to="`/explore/journalism/detail/${item.informationId}`" custom v-slot="{ href }">
        <div class="cursor-pointer" @click="gotoUrl(href)">
          <img :data-src="item.informationUrl" class="lozad h-150 w-full rounded-[6px_6px_0_0] object-cover">
          <div class="p-16">
            <RouterLink :to="`/explore/journalism/detail/${item.informationId}`" target="_blank">
              <h3 class="line-clamp-2 h-48 break-anywhere text-16 text-#292929 font-500 leading-24" :title="item.informationTitle">
                {{ item.informationTitle }}
              </h3>
            </RouterLink>
            <div class="mt-8 h-22 flex-y-center flex-wrap gap-8 overflow-hidden">
              <Tag
                v-for="tag in item.labelNameList"
                :key="tag.labelId"
                :id="tag.labelId"
                :name="tag.labelName"
                class="block h-full rounded-4 bg-#fafafa px-12 text-center text-12 text-#8b8b8b font-400 leading-22 hover:(bg-#345DE2/6 text-#345DE2)"
                blank
              />
            </div>
            <div class="mt-16 h-1 bg-[#f7f7f7]"></div>
            <div class="mt-8 text-12 text-[#adadad] font-400 leading-20">
              <span>{{ $t('home.explore.template3.journalism.read', { view: formatNumber(item.informationViews) }) }}</span>
              <span class="mx-4">·</span>
              <span>{{ $t('home.explore.template3.journalism.like', { like: formatNumber(item.informationLikeNum) }) }}</span>
              <span class="mx-4">·</span>
              <span>{{ $t('home.explore.template3.journalism.collect', { favorites: formatNumber(item.informationCollectNum) }) }}</span>
            </div>
          </div>
        </div>
      </RouterLink>
    </div>
  </section>
</template>

<style lang="scss" scoped>
</style>
